<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
     <el-card>
       <el-button type="primary" class="btn" @click="addList">添加用户</el-button>
         <el-table
             :border="true"
             ref="singleTable"
             :data="tableData"
             :stripe="true"
             style="width: 100%;padding: 10px">
           <el-table-column width="50px" type="expand">
             <template #default="{row}">
               <el-row v-for="(item1,id1) in row.children" :key="item1.id" :class="['tagbottom',id1===0?'tagtop':'' ]" class="duiqi top">
                 <!--一级目录-->
                 <el-col :span="5">
                   <el-tag closable @close="removeRoles(row,item1.id)">{{item1.authName}}</el-tag>
                   <i class="el-icon-caret-right"></i>
                 </el-col>
                 <!--二级和三级目录-->
                 <el-col :span="19">
                   <el-row v-for="(item2,id2) in item1.children" :key="item2.id" :class="[id2===0?'':'tagtop']" class="duiqi">
                     <el-col :span="6">
                       <el-tag type="success" closable @close="removeRoles(row,item2.id)">{{item2.authName}}</el-tag>
                       <i class="el-icon-caret-right"></i>
                     </el-col>
                     <el-col :span="18">
                       <el-tag  @close="removeRoles(row,item3.id)" closable type="warning" v-for="(item3,id3) in item2.children" :key="item3.id"  >{{item3.authName}}</el-tag>
                     </el-col>
                   </el-row>
                 </el-col>
               </el-row>
             </template>
           </el-table-column>
           <el-table-column width="50px" type="index">
           </el-table-column>
           <el-table-column prop="roleName" label="角色名称">
           </el-table-column>
           <el-table-column prop="roleDesc" label="角色描述">
           </el-table-column>
           <el-table-column prop="date" label="操作">
             <template #default="{row}">
             <el-button type="primary" icon="el-icon-edit" @click="showbianjidialog(row.id)">编辑</el-button>
             <el-button type="danger" icon="el-icon-delete" @click="delteyonghu(row.id)">删除</el-button>
             <el-button type="warning" icon="el-icon-menu" @click="showdialogVisible(row)">分配权限</el-button>
               </template>
           </el-table-column>
         </el-table>
     </el-card>
<!--    分配权限-->
    <el-dialog
        @close="closedialog"
        title="分配权限"
        :visible.sync="showdialog"
        width="50%">
      <el-tree ref="tree" :data="quanxianList" :props="defaultProps"   show-checkbox node-key="id" default-expand-all :default-checked-keys="keyList"></el-tree>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showdialog = false">取 消</el-button>
    <el-button type="primary" @click="allotid">确 定</el-button>
  </span>
    </el-dialog>
<!--    添加用户-->
    <el-dialog
        title="添加用户"
        :visible.sync="addListshow"
        width="50%"
    @close="closeadd">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="username">
          <el-input  v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="miaoshu">
          <el-input  v-model="ruleForm.miaoshu" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addListshow = false">取 消</el-button>
    <el-button type="primary" @click="addyonghu">确 定</el-button>
  </span>
    </el-dialog>
<!--     编辑用户-->
    <el-dialog
        title="编辑用户"
        :visible.sync="bianjishow"
        width="50%"
    @close="bianjilistclose">
      <el-form :model="bianjiList" status-icon :rules="rules1" ref="ruleForm3" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="username">
          <el-input  v-model="bianjiList.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="miaoshu">
          <el-input  v-model="bianjiList.miaoshu" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="bianjishow = false">取 消</el-button>
    <el-button type="primary" @click="getbianjiList">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  changeyonghuList,
  delroles, delteyonghu,
  getaddnewList,
  getchangeList,
  getkeyadd,
  getquanxianlist,
  getRolesList
} from "@/api/user";

export default {
  data() {
    return {
    tableData:[],
      showdialog:false,
      quanxianList:[],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      keyList:[],
      rowId:'',
      addListshow:false,
      ruleForm:{
      username:'',
        miaoshu:''
      },
      rules:{
        username:[
          {
            required:true,
            message:'请输入角色名称',
            trigger:'blur'
          },
          {
            min:5,
            max:10,
            message: '角色名称应为5-10位',
            trigger:'blur'
          }
        ],
        miaoshu:[
          {
            required:true,
            message:'请输入角色描述',
            trigger:'blur'
          },
        ]
      },
      bianjishow:false,
      bianjiList:{
        username:'',
        miaoshu:''
      },
      rules1:{
        username:[
          {
            required:true,
            message:'请输入角色名称',
            trigger:'blur'
          },
          {
            min:5,
            max:10,
            message: '角色名称应为5-10位',
            trigger:'blur'
          }
        ],
        miaoshu:[
          {
            required:true,
            message:'请输入角色描述',
            trigger:'blur'
          },
        ]
      },
      bianjiId:'',
}
  },
  created() {
    this.getRolesList()
  },
  methods: {
  async getRolesList() {
    const res = await getRolesList()
    // console.log(res)
    this.tableData=res.data
    // console.log(this.tableData)
  },
    async removeRoles(row,rightId) {
    const res= await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)
   if(res!=='confirm') {
   return this.$message.info('取消删除')
}
      // console.log(row)
      // console.log(rightId)
   const roles = await delroles(row.id,rightId)
      // console.log(roles)
      row.children=roles.data

    },
   async showdialogVisible(row) {
      const res = await getquanxianlist()
     // console.log(res)
     this.rowId= row.id
     this.quanxianList=res.data
    this.showdialog=true
     this.getKeyid(row,this.keyList)
    },
    getKeyid(node,arr) {
      // console.log(node)
      if(!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item=> {
        this.getKeyid(item,arr)
      })
    },
    closedialog() {
    this.keyList=[]
    },
    async allotid() {
    const key =[
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
    ]
      // console.log(key)
      const idstr = key.join(',')
      const res = await getkeyadd(this.rowId,{rids:idstr})
      if(res.meta.status!==200) return this.$message.error('分配权限失败')
      this.$message.success('修改成功')
      this.getRolesList()
      this.showdialog=false
    },
    async addList() {
this.addListshow=true
    },
    closeadd() {
    this.$refs.ruleForm.resetFields()
    },
    async addyonghu() {
      const res = await this.$refs.ruleForm.validate()
      console.log(res)
      if(res) {
  const res1=await getaddnewList({roleName:this.ruleForm.username,roleDesc:this.ruleForm.miaoshu})
        console.log(res)
        this.$message.success('添加成功')
        this.addListshow=false
        this.getRolesList()
      }else {
        this.$message.error('新增失败')
      }
    },
    async showbianjidialog(id) {
      console.log(id)
    this.bianjishow=true
      this.bianjiId=id
        const res1 = await getchangeList(this.bianjiId)
        this.bianjiList.username=res1.data.roleName
        this.bianjiList.miaoshu=res1.data.roleDesc

      // console.log(this.bianjiId)
    },
    bianjilistclose(){
    this.$refs.ruleForm3.resetFields()
    },
    async getbianjiList() {
      // console.log(row)
  const res =await this.$refs.ruleForm3.validate()
      if(res) {
        const res1 = await changeyonghuList(this.bianjiId,{roleName:this.bianjiList.username,roleDesc:this.bianjiList.miaoshu})
        console.log(res1)
        this.bianjishow=false
        this.getRolesList()
      }
    },
    async delteyonghu(id) {
     const res = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)
      console.log(res)
      if(res!=='confirm') {
        return this.$message.info('已取消删除')
      }
      const res1 = await delteyonghu(id)
      // console.log(res1)
      this.getRolesList()
    }
  },
  // 点击确定添加用户

   }
</script>
<style lang="less" scoped>
.el-card {
  margin-top: 15px;
}
.el-table{
  padding: 0 !important;
}
.btn{
  margin-bottom: 15px;
}
.el-tag{
  margin: 7px;
}
.tagtop {
  border-top: 1px solid #eee;
}
.tagbottom {
  border-bottom: 1px solid #eee;
}
.duiqi {
  display: flex;
  align-items: center;
}
.top{
  margin-left: 40px;
}
</style>